<script lang="ts" setup>
import {QuillEditor} from '@vueup/vue-quill'
// @ts-ignore
import ImageUploader from 'quill-image-uploader'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {uploadImage} from '@/api/upload';

// 图片上传
const modules = $ref({
    name: 'imageUploader',
    module: ImageUploader,
    options: {
        upload: (file: File) =>
                new Promise((resolve, reject) => uploadImage(file).then(({data}) => resolve(data)).catch(err => reject(err)))
    }
})

// 配置项
const toolbar = $ref([
    ['bold', 'italic', 'underline', 'strike'],
    ['image', 'blockquote', 'code-block'],

    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],
    [{'indent': '-1'}, {'indent': '+1'}],

    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'color': []}, {'background': []}],
    [{'font': []}],
    [{'align': []}],

    ['clean']
])
</script>

<template>
    <QuillEditor contentType="html" :modules="modules" theme="snow" :toolbar="toolbar"/>
</template>
